<template>
 <div class="panle_channels">
      <PanleHead v-bind="$attrs">
          {{$attrs.title}}
          <template slot="title">
            <slot></slot>
          </template>
      </PanleHead>
      <div class="panle_body">
          <Thumbnail
            v-for="item in ($attrs.channel?$attrs.channel.slice(0,4):$attrs.channel)"
            :key="item.id"
            :item="item"
          ></Thumbnail>
      </div>
  </div>
</template>

<script>
import PanleHead from "components/home/recommend/PanleHead"
import Thumbnail from "components/home/recommend/Thumbnail"
export default {
    components:{
        PanleHead,
        Thumbnail
    }
}
</script>

<style lang="stylus" scoped>
.panle_channels
    width 100%
    padding-bottom .16rem
    margin .1rem auto
    .panle_body
        min-height 1.70rem
        display flex
        flex-wrap wrap
        justify-content space-around
        align-items center
        margin 0 .14rem
</style>